<template>
  <!-- 左侧菜单 -->
  <Fragment>
    <side-menu-vue
      ref="sideRef"
      :blackboard="blackboard"
      :canvasMode="canvasMode"
      :ext="ctxs"
      :mouseHandle="mouseHandle"
      @open="sideOpenChange"
      @setCtxs="setCtxs"
      @toggle="sideToggle"
      @changeCtn="changeCtn"
    />

    <!-- 侧边栏弹窗 全局定位 -->
    <div>
      <!-- 授课模式菜单：如果写在工具栏目下，当工具收起时 会导致定位问题，所以移出来全局单独定位 -->
      <!-- 退出授课模式 -->
      <div class="sideContainer sideMenu" v-if="selectPanelActive.teachingMode">
        <teachingMode @close="closePanel('teachingMode', false)" />
      </div>
      <!-- 打开关闭授课资源 -->
      <div
        class="sideContainer sideResource"
        :style="{ paddingLeft: sidePanelStatus ? '140px' : '40px' }"
        v-if="selectPanelActive.resource"
      >
        <resource @close="closePanel('resource', true)" />
      </div>
    </div>

    <!-- 接收文件传输图标 -->
    <!-- 展开的前提下，有接受的文件 -->
    <div
      v-if="unfoldStatus && ws.files.length"
      class="ment-file"
      @click="selectPanelActive.files ? closePanel('files', false) : openTools('files')"
      @mouseenter.stop="mouseHandle(false)"
      @mouseleave.stop="mouseHandle(true)"
    >
      <el-badge :value="ws.files.length" :max="99" class="item">
        <el-popover
          :visible="selectPanelActive.files"
          @hide="closePanel('files', false)"
          popper-class="ment-popover"
          placement="top"
          :width="216"
          trigger="click"
        >
          <template #reference>
            <img :src="fileIcon" alt="" srcset="" />
          </template>

          <div class="file-box" @mouseenter.stop="mouseHandle(false)" @mouseleave.stop="mouseHandle(true)">
            <div
              class="file-lists"
              v-for="(item, index) in ws.files"
              :key="item.id"
              @click="setPreviewSrc(item.src, index)"
            >
              <span class="title">{{ item.name }}</span>
              <span class="date">{{ item.date }}</span>
            </div>
          </div>
        </el-popover>
      </el-badge>
    </div>

    <div
      id="ment-container"
      :class="{ menu: true, isPackUp: !unfoldStatus, packUp: unfoldStatus, 'non-blackboard-mode': !blackboard }"
      @mousedown.stop="mouseDown"
      @mouseenter.stop="mouseHandle(false)"
      @mouseleave.stop="mouseHandle(true)"
    >
      <div :class="{ 'ment-container-bottom': true }">
        <!-- 工具栏弹窗 局部定位 -->
        <div :class="{ 'ment-tools': true, 'ment-wslink': selectPanelActive.wslink }">
          <!-- 选择字体大小和颜色 -->
          <div v-if="selectPanelActive.colorAndSize">
            <div class="triangle"><span class="triangle_border" /></div>
            <size-color-vue
              ref="sizeColorRef"
              clear
              @setsize="(size) => Props.setPenSizeAndColor(size)"
              @setcolor="(color) => Props.setPenSizeAndColor(null, color)"
              @close="closePanel('colorAndSize')"
              @clearCanvas="clearCanvas"
            />
          </div>
          <!-- 选择工具箱弹窗 -->
          <div v-if="selectPanelActive.toolBox">
            <!-- 工具栏弹框 -->
            <div class="triangle"><span class="triangle_border tool_position" /></div>
            <toolspopover
              :svgClick="svgClick"
              @close="closePanel('toolBox', true)"
              @open="openTools"
              @clearCanvas="clearCanvas"
            />
          </div>

          <!-- 时间倒计时 -->
          <div v-if="selectPanelActive.timer">
            <timepiece @close="closePanel('timer', true)" />
          </div>

          <!-- 计算器 -->
          <div v-if="selectPanelActive.calculator">
            <calculator @close="closePanel('calculator', true)" />
          </div>

          <!-- 放大镜,聚光灯 -->
          <div v-if="['magnifyingGlass', 'spotlight'].includes(ctxs)">
            <magnifyingGlass :tools="ctxs" @clearTools="closePanel(ctxs, true)" />
          </div>

          <!-- 思维导图 -->
          <div v-if="selectPanelActive.mind">
            <typeMind @close="closePanel('mind', true)" />
          </div>
          <!-- 公式生成器 -->
          <div v-if="selectPanelActive.formula">
            <typeFormula @close="closePanel('formula', true)" />
          </div>

          <!-- 随机点名 -->
          <div v-if="selectPanelActive.randomrollCall">
            <randomrollCall @close="closePanel('randomrollCall', true)" />
          </div>
          <!-- 课堂评价 -->
          <div v-if="selectPanelActive.classroomassessment">
            <classroomAssessment @close="closePanel('classroomassessment', true)" />
          </div>

          <!-- 文件图片预览 -->
          <div v-if="selectPanelActive.preview">
            <preview :src="previewSrc" :srcIndex="srcIndex" @close="closePanel('preview', false)" />
          </div>

          <!-- 扫码连接 -->
          <div v-if="selectPanelActive.wslink">
            <div class="triangle"><span class="triangle_border wslink_position" /></div>
            <wslink @close="closePanel('wslink', false)" />
          </div>
        </div>
        <!-- 工具菜单栏 -->
        <div
          v-for="(item, index) in list"
          :class="{
            'icon-select': item.mode === 'ctx' && ctxs === item.key,
            [item.key]: true,
            ['wslink-connect']: item.key === 'wslink' && ws.roomCount > 1,
          }"
          :id="item.icon"
          :data-id="item.key"
          :data-type="item.mode"
          :key="index"
          @click.stop="handClick(item)"
          @touchstart.prevent="handClick(item)"
          v-show="!['magnifyingGlass', 'spotlight'].includes(ctxs)"
        >
          <div v-if="item.key == 'line'" class="verticalLine"></div>
          <div v-else-if="item.key !== 'blackboard'" class="icon-item">
            <!-- 图标 -->
            <span class="spanIcon">
              <icon-font :type="'icon-' + item.icon" class="iconfont" />
            </span>
            <!-- 文本 -->
            <!-- 如果是收起状态.不显示文本 -->
            <span v-if="unfoldStatus" class="spanText">
              <span class="wslink" v-if="item.key === 'wslink' && ws.roomCount > 1">
                <span class="wslink-dot"></span>
                <span class="wslint-text">已连接</span>
              </span>
              <span v-else>{{ item.title }}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </Fragment>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue';
// 字体组件
import sizeColorVue from './size-color.vue';
// 工具组件
import toolspopover from './tool.vue';
// 工具组件
import { getImageData } from '../component/tools/screenshot/html2canvas';
import {
  timepiece,
  calculator,
  magnifyingGlass,
  chalkboard,
  typeMind,
  typeFormula,
  randomrollCall,
  classroomAssessment,
  teachingMode,
  resource,
  wslink,
  preview,
} from '../component/tools';
import sideMenuVue from '../component/sideMenu.vue';

import { ElMessage } from 'element-plus';

import fileIcon from '../assets/fileIcon.svg';

import $ from 'jquery';
import useStore from '../store';
import { isUndefined } from 'lodash';

const { ws } = useStore();

const sideRef = ref();
const previewSrc = ref('');
const srcIndex = ref(0);

const Props = defineProps({
  blackboard: {
    // 是否是黑板模式
    type: Boolean,
  },
  canvasMode: {
    // 是否是画布模式
    type: Boolean,
  },
  setPenSizeAndColor: {
    type: Function,
    default() {},
  },
});

const { blackboard, canvasMode } = toRefs(Props);

// 功能按钮
// 分为功能性按钮（ctn），和内容性按钮（ctx）
// 功能性只有点击的时候，才会触发一次，不会选中
// 内容性按钮是一个模块，点击后回长事件保留在这个状态，去要再次点击才会取消选中
const defaultList = [
  {
    title: '鼠标',
    key: 'mouse',
    icon: 'shubiao',
    mode: 'ctn',
  },
  {
    title: '画笔',
    key: 'brush',
    icon: 'huabi',
    mode: 'ctx',
  },
  {
    title: '橡皮擦',
    key: 'eraser',
    icon: 'xiangpi',
    mode: 'ctx',
  },
  {
    title: '工具',
    key: 'toolCabinet',
    icon: 'gongju',
    mode: 'ctx',
  },
  {
    title: '切换画布',
    key: 'changeCanvas',
    icon: 'qiehuan',
    mode: 'ctn',
  },
  // 不在展示
  {
    title: '板中板',
    key: 'blackboard',
    icon: 'banzhongban',
    mode: 'ctx',
  },
  {
    // 加载一条竖线
    key: 'line',
  },
  {
    title: '接入手机',
    key: 'wslink',
    icon: 'shouji',
    mode: 'ctn',
  },
  {
    // 加载一条竖线
    key: 'line',
  },
  {
    title: '收起',
    key: 'packup',
    icon: 'shouqi', // 展开的图标
    mode: 'ctn',
  },
  {
    title: '展开',
    key: 'unfold',
    icon: 'zhankai',
    mode: 'ctn',
  },
];
// 功能列表
const list = ref<any[]>([]);
// 选择画笔模块
const selectPanelActive = reactive<any>({
  colorAndSize: false,
  toolBox: false,
  timer: false,
  calculator: false,
  mind: false,
  formula: false,
  randomrollCall: false,
  classroomassessment: false,
  wslink: false,
  files: false, // 文件传输
  preview: false, // 预览图片
  // 侧边栏弹窗
  teachingMode: false, // 菜单
  resource: false, // 选择资源
});
// ctxs 选中状态, 单次只允许有一个选中
const ctxs = ref<string>('');

const setPreviewSrc = (src, index) => {
  previewSrc.value = src;
  srcIndex.value = index;
  openTools('preview');
};
// 鼠标移入移出
// 移入：禁止穿透
// 移出: 允许穿透 (切不在内容性下时)
const mouseHandle = async (boo: boolean) => {
  // 1. 如果是侧边栏弹窗打开的情况下,鼠标移出时不在进行事件穿透
  // 2. 如果是侧边栏菜单和授课资源打开的前提下, 如果事件穿透会导致无法关闭
  // 3. 如果黑板，画布打开的前提下，不开启穿透
  const { teachingMode, resource } = selectPanelActive;
  if (teachingMode || resource || blackboard.value || canvasMode.value) {
    return;
  }

  // 如果有状态选中，禁止移入移出
  // console.log('如果有状态选中，禁止移入移出 =====> ', ctxs.value);
  if (ctxs.value) {
    if (boo) {
      console.log('开启事件穿透');
    } else {
      console.log('关闭事件穿透');
    }
    return;
  }

  if (window.electronAPI) {
    window.electronAPI.mouseAcross(boo, { forward: true });
  }
};

// 打开授课模式
const openTeachingModePanel = () => {
  selectPanelActive.teachingMode = true;
};

// 打开授课资源
// 如果黑板打开中,先关闭黑板
const openResourcePanel = () => {
  // 如果是关闭授课资源 resource
  // 判断,如果是黑板打开的情况下,需要关闭黑板
  if (Props.blackboard) {
    sideRef.value.setSlideCtxs('blackboard');
  }
  setTimeout(() => {
    console.log('打开弹窗');
    selectPanelActive.resource = true;
  });
};

// 监听面板状展开还是收起:默认展开
const sidePanelStatus = ref(true);
const sideToggle = (boo) => {
  sidePanelStatus.value = boo;
};

// side 事件
const sideOpenChange = (key) => {
  switch (key) {
    // 打开菜单弹窗
    case 'menu':
      openTeachingModePanel();
      break;
    // 打开资源弹窗
    case 'resource':
      openResourcePanel();
      break;
    default:
      break;
  }
};

// 鼠标按下事件
const isMove = ref(false);
const mouseDown = (event) => {
  event.stopPropagation();
  event.preventDefault();
  // 只有收起状态，才能移动
  if (unfoldStatus.value) {
    return;
  }
  // 当鼠标摁下
  docRef.value.style.cursor = 'move';
  docRef.value.style.transition = 'none';

  const mouseMoveHandler = (moveEvent) => {
    // 点击得位置
    const moveX = moveEvent.clientX;
    const moveY = moveEvent.clientY - docRef.value.offsetHeight / 2;
    docRef.value.style.left = `${moveX}px`;
    docRef.value.style.top = `${moveY}px`;
    docRef.value.style.bottom = 'auto';
    // 当按下且移动的时候，修改状态为true
    isMove.value = true;
  };

  const mouseUpHandler = () => {
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
    // 当松开的时候，修改状态为false
    setTimeout(() => {
      isMove.value = false;
      docRef.value.style.cursor = 'pointer';
    });
  };

  document.addEventListener('mousemove', mouseMoveHandler);
  document.addEventListener('mouseup', mouseUpHandler);
};

const emits = defineEmits(['ctxHand', 'ctnHand', 'message']);
// 收起/展开状态
const unfoldStatus = ref(true);

// 功能list发生点击事件
const handClick = ({ mode, key }, status?) => {
  // 处理对应的工具事件
  openTools(key, status);
  // 如果点击的是内容性按钮，做选中处理
  if (mode == 'ctx') {
    selectCtxFromClick(key);
  } else {
    // 功能性按钮
    if (['packup', 'unfold'].includes(key)) {
      if (key == 'packup') {
        // 收起后 开启事件穿透(判断)
        mouseHandle(true);
      }
      return toggleClick(key);
    }
    // console.log('key ====> ', key);
    emits('ctnHand', key);
  }
};

// 清空画布
const clearCanvas = () => {
  emits('ctnHand', 'clearCanvas');
};

// 选中功能
// status 用于处理第一次打开黑板的时候,是否展示调整字体的
const setCtxs = (ctxs, status) => {
  // 找到对应的功能 并点击它
  const ctd: any = defaultList.find((v) => v.key == ctxs);
  if (ctd) {
    handClick(ctd, status);
  }
};

//
const changeCtn = (key) => {
  handClick({ mode: 'ctn', key });
};

// 导出固定方法
defineExpose({
  // 获取ctxs状态
  getCtxs() {
    return ctxs.value;
  },
  setCtxs,
  // 修改内容性按钮
  changeCtx(key) {
    handClick({ mode: 'ctx', key });
  },
  // 修改功能性按钮
  changeCtn,
  // 清空选定状态（清空后 移入移出会正常触发事件穿透）
  clearCtxStatus() {
    ctxs.value = '';
    // 关闭所有弹窗
    closeAllPanel();
  },
  svgConfig() {
    return svgConfig;
  },
  mouseHandle,
});

// 处理展开 收起动画
const toggleClick = (key) => {
  if (isMove.value) {
    return;
  }

  switch (key) {
    // 点击收起
    case 'packup':
      // 判断如果当前事件不是画笔，橡皮擦，板中板，图形，就清空ctxs
      // 场景，选中【计算器】等功能时，点击【收起】清空了计算器，但是桌面还是无法点击
      if (!['brush', 'brushSvg', 'eraser', 'shapes', 'blackboard'].includes(ctxs.value)) {
        ctxs.value = '';
      }
      unfoldStatus.value = false;
      emits('ctnHand', key);
      break;
    case 'unfold':
      unfoldStatus.value = true;
      break;
  }
};

// 内容型按钮发生点击
// 同一个按钮点击不做处理
// 点击不同的按钮才会做切换处理
// 如果都是新旧都是画笔，可以执行
const selectCtxFromClick = (name) => {
  const dep = ctxs.value;
  if (dep !== name || name === 'brush') {
    ctxs.value = name;
    svgConfig.icon = name;
    emits('ctxHand', name);
  }
};

// 处理按钮对应的工具事件
const sizeColorRef = ref();
const openTools = (name, status?) => {
  console.log('name ====> ', name);
  const { colorAndSize } = selectPanelActive;
  switch (name) {
    // 点击画笔
    case 'brush':
      closeAllPanel();
      // 如果已经收起来了，不再打开
      if (unfoldStatus.value) {
        // console.log('status ====> ', status);
        selectPanelActive.colorAndSize = isUndefined(status) ? !colorAndSize : status;
      }
      break;
    case 'blackboard':
    case 'changeCanvas':
      // 点击板中板时 先关闭画笔选项，然后跳转到画笔时 触发!xx打开弹窗
      closeAllPanel(['toolBox']);
      break;
    // 点击橡皮擦
    case 'eraser':
      closeAllPanel();
      break;
    // 点击工具箱
    case 'toolCabinet':
      // 关闭所有面板 打开工具箱
      console.log('点击工具箱');
      closeAllPanel();
      selectPanelActive.toolBox = true;
      break;
    // 点击收起
    case 'packup':
      closeAllPanel();
      break;
    // 截图
    case 'screenshot':
      // 如果是放大镜或者聚光灯,在黑板,画布情况下不能使用
      if (Props.blackboard || Props.canvasMode) {
        return emits('message', `${Props.blackboard ? '黑板' : '画板'}模式下无法使用`, '截图功能');
      }
      ctxs.value = 'screenshot';
      onScreenshot();
      emits('ctnHand', 'screenshot');
      break;
    // 图形
    case 'shapes':
      ctxs.value = 'shapes';
      emits('ctnHand', 'shapes');
      break;
    // 聚光灯
    case 'spotlight':
    // 放大镜
    case 'magnifyingGlass':
    // 计时器
    case 'timer':
    // 计算器
    case 'calculator':
    // 思维导图
    case 'mind':
    // 公式编辑器
    case 'formula':
    // 随机点名
    case 'randomrollCall':
    // 课堂评价
    case 'classroomassessment':
      // 如果是放大镜或者聚光灯,在黑板,画布情况下不能使用
      if (['spotlight', 'magnifyingGlass'].includes(name) && (Props.blackboard || Props.canvasMode)) {
        const txtContent = {
          spotlight: '聚光灯',
          magnifyingGlass: '放大镜',
        };
        return emits('message', `${Props.blackboard ? '黑板' : '画板'}模式下无法使用`, txtContent[name]);
      }

      // 关闭所有面板 执行对应操作
      closeAllPanel();
      selectPanelActive[name] = true;
      ctxs.value = name;
      emits('ctnHand', name);
      break;
    // 图形预览
    // 接入手机
    case 'preview':
    case 'wslink':
    case 'files':
      closeAllPanel();
      selectPanelActive[name] = true;
      break;
    default:
      break;
  }
};

// 截图
const onScreenshot = async () => {
  const { capturePage } = window.electronAPI;
  const ment = document.getElementById('ment-container');
  const mentLeft = document.getElementById('ment-left-container');
  if (!capturePage) return ElMessage({ showClose: true, message: '请在客户端操作', type: 'warning', duration: 5000 });
  // 隐藏dom 客户端截图只要和ppt有关的内容 其余隐藏 比如 上一下/底部工具等
  ment.style.display = 'none';
  mentLeft.style.display = 'none';
  const obj = await capturePage({
    /* x: 100, y: 100, width: 500, height: 500 */
  });
  // console.log('obj =========================> ', obj);
  const { img = '' } = obj || {};
  const callback = () => {
    console.log('回调执行');
    ment.style.display = 'flex';
    mentLeft.style.display = 'flex';
  };
  await getImageData(img, callback);
};

// 关闭所有的工具窗
// 传递一个参数,可以排除掉指定的弹窗,关闭其他的
const closeAllPanel = (white?: string | string[]) => {
  console.log('执行');
  for (const key in selectPanelActive) {
    // 如果 white 是数组并且不包含 key，或者 white 是字符串并且 key 不等于 white
    if (!white || (Array.isArray(white) && !white.includes(key)) || (typeof white === 'string' && key !== white)) {
      // 关闭相应的工具弹窗
      if (selectPanelActive[key]) {
        selectPanelActive[key] = false;
      }
    }
  }
};

// 关闭画笔工具栏弹窗
// 工具箱中，关闭按钮清空对应的状态（清空后移出，会触发开启穿透事件）
// clearCtxs 参数 是否需要在关闭弹窗的时候 清空工具选项
const closePanel = (type, clearCtxs = false) => {
  // console.log('触发？？？？？ ====> ', type);
  // console.log('type ======> ', type, clearCtxs);
  let depCtxs = ctxs.value;
  // 关闭
  if (type) {
    selectPanelActive[type] = false;
  }
  if (clearCtxs) {
    ctxs.value = '';
  }
  // 如果关闭的是工具箱，且关闭之前是图形shape
  if (depCtxs === 'shapes') {
    // 关闭的时候，选中画笔
    // handClick({ mode: 'ctx', key: 'brush' });
  }
  // 如果是关闭操作工具（放大镜，聚光灯，计时器，截图，计算器，思维导图，公式编辑器,随机点名,课堂评价,菜单） 工具箱等关闭时 开启事件穿透
  const toolsNames = [
    'toolBox',
    'magnifyingGlass',
    'spotlight',
    'timer',
    'screenshot',
    'calculator',
    'mind',
    'formula',
    'randomrollCall',
    'classroomassessment',
    'teachingMode',
    'resource',
    'wslink',
    'preview',
    'files',
  ];

  // 工具栏关闭之后，此时处于页面端，需要进行开启穿透 (例如：打开定时器，关闭后，鼠标移动到页面上某个区域...)
  if (toolsNames.includes(type)) {
    // 1. 如果是在黑板或者画布中打开接入手机，关闭时 需要关闭穿透
    // 2. 如果在其他地方打开接入手机，关闭时 不需要做处理
    // console.log('type ===========================================================> ', type)
    if (Props.blackboard || Props.canvasMode) {
      // 如果关闭接入手机时，处于黑板状态或者处于画笔，橡皮擦，图形状态下 不开启穿透(不执行)
    } else {
      // console.log('开启穿透');
      // 在其他模式 关闭时 开启穿透
      mouseHandle(true);
    }
  }

  // 如果是 关闭 菜单弹窗，执行内部清除
  if (type === 'teachingMode') {
    sideRef.value.closeTeachingMode();
  }
};

// 形状 打开形状粉笔图层
// 绘制形状，形状图标，颜色，大小
const svgConfig = reactive({
  icon: '',
  color: '',
  size: '',
});
const svgClick = (icon, color, size) => {
  // 当选中了图案
  svgConfig.icon = icon;
  svgConfig.color = color;
  svgConfig.size = size;
  emits('ctxHand', 'brushSvg');
};

// 监听unfoldStatus
watch(
  () => unfoldStatus.value,
  () => {
    // 如果是收起
    if (!unfoldStatus.value) {
      // 移出dom标签上的style属性
      docRef.value.removeAttribute('style');
    }

    const data = defaultList.filter((v) => {
      // unfoldStatus.value true 展开,title不能是 '展开'
      // unfoldStatus.value false 收起,title只能是 '收起'
      return (unfoldStatus.value && v.key !== 'unfold') || (!unfoldStatus.value && v.key == 'unfold');
    });
    list.value = data;
  },
  { deep: true, immediate: true },
);

const docRef = ref();

onMounted(() => {
  docRef.value = document.getElementById('ment-container');
  // 默认情况下 手动开启事件穿透
  mouseHandle(true);
  // 注册监听(触摸屏点击的时候 穿透)
  window.electronAPI?.receiveMessage('message-to-renderer', (point) => {
    console.log('point ====> ', point);
    // 为空的时候 触发
    if (ctxs.value) {
      // console.log('有值 不需要监听接入');
      return;
    }
    // console.log('没值 需要监听接入 ====> ', point);
    // const parentElement = document.getElementById('ment-container');
    const iconItems = document.querySelectorAll('.icon-item');
    // console.log('iconItems =====> ', iconItems);
    // 遍历每个 icon-item 元素
    for (let i = 0; i < iconItems.length; i++) {
      const iconItem = iconItems[i];
      const rect = iconItem.getBoundingClientRect();
      // console.log('i ===>  ', rect);
      // 判断点是否在子元素的范围内
      if (point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom) {
        const icon = iconItem.id;
        const vdx = defaultList.filter((v) => v.icon === icon);
        // console.log('vdx ======> ', vdx);
        if (vdx.length) {
          // 关闭事件穿透
          mouseHandle(false);
          // console.log('vdx===============> ', vdx);
          handClick(vdx[0]);
        }
        return;
      }
    }
  });
});
</script>

<style lang="scss" scoped>
// 全局em比例px, 1 : 15.11
.menu {
  transform: translateZ(0);
  z-index: 5;
  background: rgba(241, 241, 241, 0.89) !important;
  backdrop-filter: blur(20px);
  position: fixed;
  bottom: 3em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  padding: 16px 0 16px 16px;
  border-radius: 8px;
  border: 1px solid rgb(241, 241, 241);
}

// 非黑板窗口下
.non-blackboard-mode {
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}

// 侧边栏弹出得面板样式
.sideContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  z-index: 20;
}

// 侧边栏菜单 居中显示
.sideMenu {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 侧边栏 授课资源 居左显示
.sideResource {
  display: flex;
  align-items: center;
  transition: 0.22s;
}

// 文件传输
.ment-file {
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 1000;
  width: 56px;
  height: 56px;
  background: #00d68a;
  border-radius: 50%;
  box-shadow: 0px 0px 24px 0px rgb(0 0 0 / 10%);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 25px;
    height: 20px;
  }
}

// 默认展开
.ment-container-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  user-select: none;
  cursor: pointer;

  // 工具栏
  .ment-tools {
    position: absolute;
    bottom: 110%;
    left: 0;
    width: 100%;

    .triangle {
      display: none; // 新版本不要箭头
      position: absolute;
      bottom: 0px;

      .triangle_border {
        border-width: 14px 10px 0; // 原始值为 14px 10px 0，转换为 0.93333333em 0.66666667em 0
        border-style: solid;
        border-color: #ffffff transparent transparent;
        position: absolute;
        left: 22px;
        bottom: 0px;
        transform: translateY(100%);
      }

      .tool_position {
        left: 167px;
      }
    }
  }

  // 接入手机
  .ment-wslink {
    right: 0px;

    .wslink_position {
      left: 98px !important;
    }
  }
}

// 收起样式
.isPackUp {
  // right: 2%;
  left: auto;
  left: 97%; // 原始值为 90%，转换为 5em
  transition: 0.225s;
  padding-right: 16px;

  .icon-item {
    margin-right: 0;
  }
}

// 展开
.packUp {
  top: auto !important;
  bottom: 3em !important;
  left: 50% !important;
  transition: 0.225s;
  transform: translateX(-50%);
  z-index: 100; //
}

// 每个按钮得区域
.line {
  align-self: start;
  margin-right: 16px;

  .verticalLine {
    width: 1px;
    height: 48px;
    background: #cccccc;
  }
}

// 选中的按钮样式
:deep {
  // 基本样式
  .icon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    // border: 1px solid red;

    .spanIcon {
      display: flex;
      background: #ffffff;
      border-radius: 8px;
      justify-content: center;
      align-items: center;
      padding: 18px;

      .iconfont {
        svg {
          fill: #6a6a6a !important;
          font-size: 28px;
        }
      }
    }

    .spanText {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #6a6a6a;
      margin: 5px 0 0 0;

      .wslink {
        display: flex;
        align-items: center;

        .wslink-dot {
          width: 6px;
          height: 6px;
          display: block;
          background: #00d68a;
          border-radius: 50%;
        }

        .wslint-text {
          color: #6a6a6a;
          margin-left: 4px;
        }
      }
    }
  }

  // 选中样式
  .icon-select {
    transition: 0.225s;

    .spanIcon {
      background: #fc8b09;

      .iconfont {
        svg {
          fill: white !important;
        }
      }
    }

    .spanText {
      color: #fc8b09;
    }
  }

  // wslink 连接成功的样式
  .wslink-connect {
    .spanIcon {
      background: #00d68a;

      .iconfont {
        svg {
          fill: white !important;
        }
      }
    }
  }
}
</style>

<style lang="less">
.ment-popover {
  padding: 0 !important;
  box-sizing: border-box;
  bottom: 124px !important;

  .file-box {
    padding: 8px 8px 0 8px;
    background: #eeeeee;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 30em;
    overflow: auto;

    /*滚动条样式*/
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 2px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 0px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    .file-lists {
      width: 100%;
      background: #ffffff;
      border-radius: 8px;
      padding: 11px;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      cursor: pointer;
      margin-bottom: 8px;

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #1a1a1a;
        font-style: normal;
        white-space: nowrap;
        /* 不换行 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
      }

      .date {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #a4a4a4;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>
